<template>
    <div>
        <van-nav-bar id="reset" :title="detailFlag == 3 ? '文章详情' : '视频详情'" left-arrow @click-left="backHandle" fixed
            z-index="100" />

        <div class="pageCon fuPage">

            <!-- 帖子详情 -->
            <div class="topicBox" v-if="detailFlag == 3">
                <div class="imgBox">
                    <img :src="item" alt="" v-for="(item, index) in imgList" :key="index">
                </div>
            </div>

            <div v-else class="videoCon">
                <!-- 视频 -->
                <div class="videoBox">
                    <div class="overBg" v-if="isShowOver" @click="isShowOver = false">
                        <img :src="topic.topicPic" />
                        <van-icon name="play-circle-o" class="playIcon" />
                    </div>
                    <video @timeupdate="onPlayerTimeupdate($event)" :src="topic.topicContent" controls autoplay
                        v-else></video>
                </div>
                <div class="navConBox">
                    <div class="navCon">
                        <div class="active">简介
                            <div class="line"></div>
                        </div>
                    </div>
                    <div class="doctorInfo">
                        <div class="leftBox">
                            <span class="videoTit">{{ topic.topicTitle }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="commBox commBox1">
                <div class="commTitle">热门评论</div>
                <div class="commMain">
                    <template v-if="commentList.length != 0">
                        <div v-for="(item, index) in commentList" :key="index">
                            <img :src="item.userImg">
                            <div>
                                <div>
                                    {{ item.userName || '游客' }}
                                    <span>{{ item.dateTime || '刚刚' }}</span>
                                </div>
                                <div>{{ item.commontsContent }}</div>
                            </div>
                        </div>
                    </template>
                    <div class="emptyBox" v-else>
                        暂无评论
                    </div>
                </div>
            </div>

            <!-- 文章底部 -->
            <div class="articeBottom">
                <input type="text" v-model="comment" placeholder="写评论参与互动" @focus="focusFlag = true" />
                <template v-if="!focusFlag">
                    <div @click="topicHandle('like')">
                        <img src="../../assets/topicDetail/bl1.png" v-if="!isLike" />
                        <img src="../../assets/topicDetail/bl2.png" v-else />
                    </div>
                    <div @click="topicHandle('share')">
                        <van-icon name="share" color="#fff" size="24px" />
                    </div>
                </template>
                <div v-else class="sendBtn" @click="subHandle">发布</div>
            </div>



        </div>



        <van-popup v-model="isGetSuccess">
            <div class="fuBox" @click="isGetSuccess = false">
                <div class="futitle">
                    {{ getScore }}
                </div>
            </div>
        </van-popup>

        <!-- <div class="fuDia" v-if="isNoVip">
            <div class="fuBox" @click="isGetSuccess = false">
                <div class="futitle">
                    恭喜您获得{{ getScore }}个积分
                </div>
            </div>
        </div> -->


    </div>

</template>

<script>
let that
import { getTopicCommonts, addComments, addPrise } from '../../network/content'
import { updateUserTask, taskList } from '../../network/user'
import { imgUrl } from '../../network/request'
export default {
    name: 'HomeR',
    data() {
        return {
            isLoading: false,
            imgUrl,
            detailFlag: 2,// 2 视频  3 文章 
            focusFlag: false,
            topic: '',
            commentList: [],
            comment: '', //评论内容
            isLike: false,
            isCollection: false,
            taskList: [],//任务列表
            isGetSuccess: false,
            getScore: 0,
            isShowOver: true,
            isNoVip: false,
            isVip: localStorage.isVip == 1,
            imgList: [],
            userType: localStorage.userType
        }
    },
    mounted() {

    },
    methods: {

        // 点赞  取消点赞  分享
        topicHandle(flag) {
            if (flag == 'like') {
                this.addPrise()
            } else {
                shareHref()
                //this.$toast('模拟分享成功')
                // this.finishTask(this.detailFlag == 2 ? 4 : 7)
            }
        },
        addPrise() {
            addPrise({
                userId: localStorage.userId,
                topicId: this.topic.topicId,
                flag: this.isLike ? 0 : 1
            }).then(res => {
                if (res.flag) {
                    this.$toast(!this.isLike ? '已点赞' : '已取消')
                    this.isLike = !this.isLike
                    if (this.isLike) {
                        this.finishTask(this.detailFlag == 2 ? 2 : 5)
                    }
                }
            })
        },

        getData() {
            getTopicCommonts({
                topicId: this.topic.topicId,
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.isLoading = false
                    console.log(res);

                    this.isLike = res.data.prise != null
                    this.commentList = res.data.comments
                }
            })
        },


        subHandle() {
            if (this.comment == '') {
                this.$toast.fail('请输入评论内容')
                return
            }

            addComments({
                topicId: this.topic.topicId,
                userId: localStorage.userId,
                commontsContent: this.comment,
                parentId: 0,
                dateTime: this.getNow(),
            }).then(res => {
                if (res.flag) {
                    this.focusFlag = false
                    this.$toast.success('发布成功')
                    this.comment = ''
                    this.finishTask(this.detailFlag == 2 ? 3 : 6)
                    this.getData()
                }
            })
        },
        // 完成任务
        finishTask(flag) {
            var obj = {
                userId: localStorage.userId,
                taskName: '',
                score: '',
            };
            this.taskList.forEach(ele => {
                if (ele.taskId == flag) {
                    obj.taskName = ele.taskName
                    obj.score = localStorage.isVip == 1 ? ele.vipTaskScore : ele.taskScore
                }
            })

            console.log(obj);

            // return

            updateUserTask(obj).then(res => {
                if (res.flag) {
                    if (res.data.flag == 1) {
                        this.getScore = obj.score
                        this.isGetSuccess = true
                        var user = JSON.parse(localStorage.user)
                        user.taskScore += obj.score
                        localStorage.user = JSON.stringify(user)
                    }

                }
            })

        },
        getTaskList() {
            taskList().then(res => {
                if (res.flag) {
                    this.isLoading = false
                    console.log(res);
                    this.taskList = res.data
                }
            })
        },

        pullHandle() {

            this.isLoading = true
            this.getData()
            this.getTaskList()

        },

        backHandle() {
            this.$router.back()
        },

        getNow: function () {
            var date = new Date()
            var year = date.getFullYear()
            var month = this.add0(date.getMonth() + 1)
            var day = this.add0(date.getDate())
            var hours = this.add0(date.getHours())
            var min = this.add0(date.getMinutes())
            var se = this.add0(date.getSeconds())
            var str = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + se
            return str
        },
        add0: function (m) {
            return m < 10 ? '0' + m : m
        },
        onPlayerTimeupdate(player) {

            const currentTime = Number.parseInt(player.target.currentTime)
            console.log(currentTime);
            // // 播放10秒且不是vip
            // if (currentTime >= 5 && !this.isVip && this.userType == 0) {
            //     this.isShowOver = true
            //     this.$dialog.confirm({
            //         title: '提示',
            //         message: '请开通家庭医生后继续观看',
            //         confirmButtonText: '立即开通',
            //         cancelButtonText: '再想想'
            //     })
            //         .then(() => {
            //             // on confirm
            //             // 跳转到开通页

            //             this.$router.push('/familyIndex')
            //         })
            //         .catch(() => {
            //             // on cancel
            //         });
            // }
        }

    },
    created() {
        this.topic = this.$router.history.current.query.content
        this.detailFlag = this.$router.history.current.query.flag
        console.log(this.topic);

        if (this.detailFlag == 3) {
            this.topic.topicContent = this.topic.topicContent.substring(0, this.topic.topicContent.length - 1)
            this.imgList = this.topic.topicContent.split(',')

        }

        sharehrefTitle = this.topic.topicTitle
        share_img = this.topic.topicPic


        topicId = this.topic.topicId
        console.log(this.detailFlag);

        this.getData()
        this.getTaskList()

        that = this

    },
    //计算属性
    computed: {

    },
    filters: {

    }




}
var shares = null;
var Intent = null,
    File = null,
    Uri = null,

    topicId = '',

    share_img = '',
    sharehrefTitle = '',
    sharehrefDes = '大家都在智医助手讨论问题，你也来一起看看吧',
    // sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3d6a0361512a8eaf&redirect_uri=https://www.ccclkj.cn/sharePage/aiMInApp/aiMinInto.html',
    sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxade11a265cf8f0f3&redirect_uri=https://www.ccclkj.cn/sharePage/aiMInApp/aiMinInto.html',
    main = null;
// H5 plus事件处理
function plusReady() {
    updateSerivces();
    if (plus.os.name == "Android") {
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if (window.plus) {
    plusReady();
} else {
    document.addEventListener("plusready", plusReady, false);
}

/**
 * 
 * 更新分享服务
 */
function updateSerivces() {
    plus.share.getServices(function (s) {
        shares = {};
        for (var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
    }, function (e) {
        that.$toast("获取分享服务列表失败：" + e.message);
    });
}

function shareAction(sb, bh) {
    if (!sb || !sb.s) {
        that.$toast("无效的分享服务！");
        return;
    }

    var msg = {
        content: sharehrefDes,
        extra: {
            scene: sb.x,
            current_id: localStorage.userId,
        }
    };
    if (bh) {
        var state = topicId + "@1";
        msg.href = sharehref + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
        if (sharehrefTitle != "") {
            msg.title = sharehrefTitle;
        }
        if (sharehrefDes && sharehrefDes != "") {
            msg.content = sharehrefDes;
        }
        msg.thumbs = [share_img];
        msg.pictures = ["_www/logo.png"];
    } else {
        that.$toast("取消分享");
        if (pic && pic.realUrl) {
            msg.pictures = [pic.realUrl];
        }
    }
    // 发送分享
    if (sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        that.$toast("未授权");
        sb.s.authorize(function () {
            shareMessage(msg, sb.s);
        }, function (e) {
            that.$toast("认证授权失败");

        });
    }
}
function shareMessage(msg, s) {
    s.send(msg, function () {
        that.$toast("分享到\"" + s.description + "\"成功！ ");
        that.finishTask(that.detailFlag == 2 ? 4 : 7)
    }, function (e) {
        that.$toast("分享到\"" + s.description + "\"失败: ");
    });
}
// 分析链接
function shareHref() {
    var shareBts = [];
    // 更新分享列表
    var ss = shares['weixin'];
    ss && ss.nativeClient && (shareBts.push({
        title: '微信朋友圈',
        s: ss,
        x: 'WXSceneTimeline'
    }),
        shareBts.push({
            title: '微信好友',
            s: ss,
            x: 'WXSceneSession'
        }));
    // 弹出分享列表
    shareBts.length > 0 ? plus.nativeUI.actionSheet({
        title: '分享',
        cancel: '取消',
        buttons: shareBts
    }, function (e) {
        if (e.index == 0) {
            that.$toast("您已取消了分享哟~");
        }
        (e.index > 0) && shareAction(shareBts[e.index - 1], true);

    }) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}


</script>



<style lang='less' scoped>
.commBox {
    position: relative;
    width: 100%;
    min-height: 800px;
    max-height: 1200px;
}

.commBox1 {
    padding-top: 20px;
    border-top: 20px solid #fafafa;
}


.commTitle {
    box-sizing: border-box;
    padding-left: 30px;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
    line-height: 36px;


}

.commMain {
    padding-bottom: 120px;
    width: 100%;
}

.commMain>div {
    margin-top: 14px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 50px 22px 30px;
    display: flex;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 36px;
}

.commMain>div>img {
    margin-right: 16px;
    width: 70px;
    height: 70px;
    background: #CCCCCC;
    border-radius: 50%;
}

.commMain>div>div {
    flex: 1;
}

.commMain>div>div>div:first-child {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #999999;
}

.commMain>div>div>div:first-child>span {
    color: #CCCCCC;
}

.emptyBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 400px;
    font-size: 24px !important;
    color: #999 !important;

}


.articeBottom {
    box-sizing: border-box;
    padding: 0 34px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    width: 750px;
    height: 121px;
    background: #fafafa;
    border-radius: 30px 30px 0px 0px;
}

.articeBottom>input {
    box-sizing: border-box;
    padding-left: 30px;
    width: 508px;
    height: 68px;
    background: rgba(0, 0, 0, .1);
    border-radius: 34px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    border: none;
    outline: none;
}

.articeBottom>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
}

.articeBottom>div>img {
    width: 42px;
    height: 38px;
}

.pageCon {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow-y: scroll;
}


#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}

.sendBtn {
    width: 152px !important;
    height: 70px !important;
    background: #26E1CA !important;
    border-radius: 35px !important;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px !important;
    color: #FFFFFF !important;
}

.videoCon {
    position: sticky;
    top: 0px;
    width: 100%;
    // background: aqua;
    z-index: 100;
    background: #fff;
}


.videoBox {
    position: relative;
    width: 750px;
    height: 422px;
    /* background: #999999; */
}

.overBg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.overBg>img {
    width: 100%;
    height: 100%;
}

.playIcon {
    position: absolute;
    top: 150px;
    left: 320px;
    font-size: 120px;
    color: #666;
    z-index: 2;
}

.videoBox>video {
    width: 100%;
    height: 100%;
}

.navConBox {
    width: 100%;
    background-color: #fff;
    border-bottom: 2px solid #fafafa;
}


.navCon {
    box-sizing: border-box;
    padding-left: 58px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 400;
    font-size: 24px;
    color: #858B90;
    border-bottom: 2px solid #f2f2f2;
}

.navCon>div {
    margin-right: 56px;
}

.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 28px !important;
    color: #3CBD70 !important;
}

.line {
    margin-top: 10px;
    width: 50px;
    height: 4px;
    background: #3CBD70;
    border-radius: 2px;
}

.doctorInfo {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 32px 30px 20px;
    width: 100%;
    background-color: #fff;
}

.infoCon {
    display: flex;
    align-items: center;

}

.infoCon>img {
    margin-right: 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #666;
}

.infoCon>div {
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 28px;
    color: #333333;
}

.infoCon>div>span:last-child {
    font-size: 20px;
    color: #858B90;
}

.videoTit {
    display: block;
    margin: 10px 0;
    font-weight: bold;
    font-size: 32px;
    color: #333333;
}

.leftBox>div:nth-child(3)>img {
    margin-right: 12px;
    width: 28px;
    height: 20px;
}

.leftBox>div:nth-child(3) {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
}

.topicBox {
    position: relative;


}

.topicOverBox {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 80%;

    // background: aqua;
    // filter: blur(10px);

    // &::after {
    //     position: absolute;
    //     content: "";
    //     // background-image: url(../../assets/topicDetail/over.png);
    //     // background: rgba(255, 255, 255, .7);
    //     background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
    //     // background: linear-gradient(180deg, #fff, #333, );
    //     background-size: 100% 100%;
    //     background-repeat: no-repeat;
    //     background-attachment: fixed;
    //     background-size: cover;
    //     background-position: top;
    //     top: 0;
    //     left: 0;
    //     right: 0;
    //     bottom: 0;
    //     filter: blur(10px);
    //     z-index: 0;
    // }
}

.topicOverBox>div:first-child {
    position: absolute;
    top: 300px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 28px;
    z-index: 10;
    color: #333;
    font-weight: bold;
    // background: #f2f2f2;
}

.topicOverBox>div>span {
    margin: 0 16px;
    font-size: 32px;
    color: #3CBD70;
}


.overTop {
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
}

.overBottom {
    width: 100%;
    height: 60%;
    background: #fff;
}

.van-popup {
    background: transparent;
}

.imgBox {
    width: 100%;
}

.imgBox>img {
    width: 100%;
}
</style>